<template>
	<el-dialog id="table-dialog" :destroy-on-close="true" :visible.sync="visible" :width="width" center lock-scroll top="5vh" @close="handleClose">
		<div slot="title" class="dialog-title">
			<div class="dialog-title">{{header}}</div>
		</div>
		<editable-table
			:data="data"
			:columns="columns"
			:operateWidth="operateWidth"
			@submit="handleSubmit"
			@handle-append="appendRow"
			@handle-remove="removeRow"
			@handle-change="handleChange"
			@handle-blur="handleBlur">
		</editable-table>
		<div slot="footer" center class="dialog-footer">
			<el-button type="primary" @click="handleSubmit()">提 交</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: "table-dialog",
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		header: {
			type: String,
			default: ""
		},
		width: {
			type: String,
			default: "50%"
		},
		operateWidth: {
			type: String,
			default: "143px"
		},
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		handleSubmit() {
			this.$emit("submit", this.data);
		},
		appendRow(rowIndex) {
			this.$emit("handle-append", rowIndex);
		},
		removeRow(rowIndex) {
			this.$emit("handle-remove", rowIndex);
		},
		handleChange(prop, row, rowIndex) {
			this.$emit("handle-change", prop, row, rowIndex);
		},
		handleBlur(prop, row, rowIndex) {
			this.$emit("handle-blur", prop, row, rowIndex);
		},
		handleClose() {
			this.$emit("close");
		}
	}
};
</script>

<style scoped>
#table-dialog >>> .el-dialog {
	background-color: #F5F5F5;
}

.dialog-title {
	font-size: 20px;
}
</style>
